<!-- 获取组织机构列表 -->
<template>
  <el-cascader  :show-all-levels="false" @clear="clearDept" :class="customClass" :disabled="disabled" :popper-class="popperClass" :placeholder="placeholder" :change-on-select="changeOnSelect" v-model="selectedOptions" clearable :options="options" @change="changeDept"
               filterable ref="refHandle"></el-cascader>
</template>

<script>
import {
  getOrganizationTree,
} from '@/services/model/user'
import {getLocalStorageItem,setLocalStorageItem} from '@/utils/storage-helper'
import {ORGANIZATION_TREE} from '@/utils/constant'

export default {
  props: {
    placeholder: {
      type: String,
      default: '请选择'
    },
    customClass: String,
    popperClass: String,
    disabled:Boolean,
    changeOnSelect: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    //任选一级时，自动关闭选项框
    selectedOptions() {
      if (this.$refs.refHandle) {
        this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
      }
    }
  },
  computed: {
    selectedOptions: {
      get(val) {
        if (val.$attrs.value) {
          return val.$attrs.value.split('-') || []
        } else {
          return []
        }
      },
      set(val) {

        this.newOptions = val.join('-')
        console.log( this.newOptions)
        this.$emit('input', this.newOptions)
      }
    }
  },
  methods: {
    changeDept() {
      this.$emit("change")
    },
    clearDept() {
      this.$emit("clear")
    },
    async getOrganizationTree() {
      let org = getLocalStorageItem(ORGANIZATION_TREE)
      if (!org || org === null) {
        let res = await getOrganizationTree();
        org = res.data
        setLocalStorageItem(ORGANIZATION_TREE, res.data, 1)
      }
      this.options = org
    },
  },
  data() {
    return {
       options: [],
      newOptions: '',
    }
  },
  mounted() {
    this.getOrganizationTree()
  }
}
</script>

<style>
</style>
